<template>
	<view>
		<view class="message">
			<view class="title">
				备注
				<text class="iconfont iconguanbi1" @click="close('remark')"></text>
			</view>
			<view class="textarea-box"><textarea v-model="remark" class="textarea" maxlength="200" placeholder="输入请不多于200字"></textarea></view>
			<button @click="save" type="primary" class="primary-btn btn save">保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			judge: false,
			remark: ''
		};
	},
	props: {
		message: {
			type: String,
			default: ''
		},
		popup_name: {
			type: String,
			default: ''
		}
	},
	mounted() {
		this.remark = JSON.parse(JSON.stringify(this.message));
	},
	methods: {
		save() {
			if (this.judge) return false;
			this.judge = true;

			this.$emit('remark', this.remark, () => {
				this.judge = false;
			});
		},
		close(name) {
			this.$emit('close', name);
		}
	}
};
</script>

<style lang="scss" scoped>
.message {
	width: 5.2rem;
	min-height: 3.2rem;
	border-radius: 0.06rem;
	background: #ffffff;
	padding-bottom: 0.15rem;
	.title {
		width: 100%;
		height: 0.5rem;
		border-bottom: 0.01rem solid #e6e6e6;
		text-align: center;
		line-height: 0.5rem;
		font-size: 0.16rem;
		font-weight: bold;
		position: relative;
		.iconguanbi1 {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0.15rem;
			font-size: 0.18rem;
		}
	}
	.textarea-box {
		margin: 0.15rem;
		height: 2.2rem;
		border: 0.01rem solid #e6e6e6;
		border-radius: 0.06rem;
		padding: 0.15rem;
		box-sizing: border-box;
		.textarea {
			width: 100%;
			height: 100%;
		}
	}
	.save {
		width: auto !important;
		float: right;
		margin-right: 0.15rem;
	}
}
.message:after {
	overflow: hidden;
	display: block;
	content: '';
	height: 0;
	clear: both;
}
</style>
